<template>
<div>
    <ul class="tabs">
        <li v-for="(item, index) in tabList" class="cursor-pointer" :class="{'activated':index==currentTab.value }" @click="handleCheck(index)">
                <div class="flex items-center">
                    <div class="text-[14px]">{{item.title}}</div>
                </div>
            </li>
</ul>
<Reliability v-if="currentTab.value==0" />
<Experiment v-if="currentTab.value==1" />
<FlowPath v-if="currentTab.value==2" />
<StandardTest v-if="currentTab.value==3" />
</div>
    </template>
    <script setup>
import { reactive, ref } from 'vue';
import Reliability from  './reliability.vue'
import Experiment from  './experiment.vue'
import FlowPath from './flowPath.vue'
import StandardTest from './standardTest.vue'

const currentTab = reactive({value: 0});
const tabList= 
reactive(
[{
    title: '艾诺产品可靠性介绍',
},
{
    title: '艾诺产品可靠性实验介绍',
},
{
    title: '可靠性流程介绍',
},
{
    title: '可靠性标准测试',
}])

const handleCheck = (index) => {
    currentTab.value=index

}
    </script>
    <style lang="scss" scoped>
     .tabs{
    border: 1px solid rgba(51, 51, 51, 0.2);
    display: flex;
    margin-top: 20px;
    li{
        padding: 9px 38px;
        box-sizing: border-box;
        border-right: 1px solid rgba(51, 51, 51, 0.2);
        font-size: 16px;
        font-weight: 500;
    }
 } .tabs{
    border: 1px solid rgba(51, 51, 51, 0.2);
    display: flex;
    li{
        padding: 9px 38px;
        box-sizing: border-box;
        border-right: 1px solid rgba(51, 51, 51, 0.2);
        font-size: 16px;
        font-weight: 500;
    }
 }
.activated{
background-color: #712C2F;
color: #fff;

}</style>